<template>
	<view class="transfer l-whitespace">
		<view class="transfer-ewm">
			<view class="transfer-ewm-r">
				<van-cell-group>
					<van-field
						:value="scanCode"
						clearable
						placeholder="请输入钱包地址"
						:border="false"
						@change="onCodeChange"
					>
						<view
							@click="onScanCode"
							slot="left-icon"
							class="icon-btn iconfont iconsaoma"
						></view>
					</van-field>
				</van-cell-group>
			</view>
		</view>
		<view class="transfer-tab">
			<view class="integral">
				<view class="integral-wrap">
					<van-cell-group class="integral-bg">
						<van-field
							clearable
							:value="LABtk"
							type="number"
							maxlength="10"
							input-class="integral-input"
							placeholder="请输入LABtk数量"
							@change="onChange"
						/>
					</van-cell-group>
					<view class="integral-info">
						<text class="integral-info-txt">LABtk余额 {{ walletInfo.tk }}</text>
						<text class="integral-info-btn" @click="onAllTransfer">全部转账</text>
					</view>
				</view>
			</view>
		</view>
		<view class="paly-btn">
			<van-button
				square
				type="primary"
				size="large"
				@tap="onSubmit"
				custom-class="paly-btn-bg"
			>
				转账
			</van-button>
		</view>
		<view>
			<van-dialog use-slot async-close :show="dialogShow" show-cancel-button @close="onClose">
				<view class="dialog">
					<view class="dialog-title van-hairline--bottom">转账</view>
				</view>
				<van-field
					:value="password"
					type="password"
					label="交易密码"
					:border="false"
					clearable
					@change="onPssword"
					placeholder="请输入交易密码"
				/>
			</van-dialog>
		</view>
	</view>
</template>

<script>
import DialogPwd from '../../../components/dialog/pwd-dialog.vue';
import { mapActions, mapGetters } from 'vuex';
export default {
	components: {
		DialogPwd
	},
	data() {
		return {
			scanCode: '',
			LABtk: '',
			dialogShow: false,
			password: ''
		};
	},
	onLoad(option) {
		this.scanCode = option.code;
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo',
			walletInfo: 'getWalletInfo'
		})
	},
	methods: {
		...mapActions([
			'setWalletInfo'
		]),
		onScanCode() {
			uni.scanCode({
				onlyFromCamera: true,
				success: res => {
					this.scanCode = res.result;
				}
			});
		},
		emitClose(e) {
			console.log(e);
		},
		onSubmit() {
			if (this.scanCode.length < 5) {
				uni.showToast({
					title: '收款地址不正确',
					icon: 'none'
				});
				return;
			}
			if (this.LABtk < 1) {
				uni.showToast({
					title: '请输入转账数量',
					icon: 'none'
				});
				return;
			}
			if (this.LABtk > this.walletInfo.tk) {
				uni.showToast({
					title: 'LABtk数量不足',
					icon: 'none'
				});
				return;
			}
			this.dialogShow = true;
		},
		onClose (event) {
			if (event.detail === 'confirm') {
				// 异步关闭弹窗
				this.$http
					.transferLABtk({
						toAddr: this.scanCode,
						fromAddr: this.userInfo.addr,
						value: this.LABtk,
						jypwd: this.password
					})
					.then(e => {
						if (e.data.msg.toLowerCase() === 'ok') {
							this.dialogShow = false;
							this.walletInfo.tk -= Number(this.LABtk)
							this.setWalletInfo(this.walletInfo)
							uni.showToast({
								title: '转账成功',
								icon: 'none'
							});
							return;
						}
						uni.showToast({
							title: e.data.msg,
							icon: 'none'
						});
						this.dialogShow = false;
					});
			} else {
				this.dialogShow = false;
			}
			this.password = '';
		},
		onAllTransfer(key) {
			this.LABtk = Number(this.walletInfo.tk);
		},
		onCodeChange(e) {
			this.scanCode = e.detail;
		},
		onPssword(e) {
			this.password = e.detail;
		},
		onChange(e) {
			this.LABtk = Number(e.detail)
		}
	}
};
</script>

<style scoped lang="scss">
@import '../../../common/trade.scss';
.integral {
	border-radius: 10upx;
	overflow: hidden;
	&-wrap {
		padding: 40upx 30upx;
		background-color: #fff;
	}
	&-input {
		height: 50px !important;
		background-color: #9b9b9b !important;
	}
	&-ewm {
		display: flex;
		align-items: center;
		&-l {
			flex: 1;
		}
		&-r {
			width: 140upx;
		}
	}
	&-info {
		display: flex;
		justify-content: space-between;
		padding: 20upx 10upx;
		text {
			display: block;
		}
		&-txt {
			color: #9b9b9b;
		}
		&-btn {
			font-size: 28upx;
			color: #0079f3;
		}
	}
}
.paly-btn {
}
.dialog {
	&-title {
		padding: 20upx 0;
		font-size: 28upx;
		font-weight: 500;
		text-align: center;
	}
	&-sum {
		padding: 30upx;
		.sum {
			font-size: 28upx;
			color: #f4544d;
		}
	}
}
</style>
